<template>
  <div class="TrainingContainer">
    <div class="nav">
      <div class="left">
        <el-space wrap>
          <el-card class="box-card">
            <div class="collapse">
              <el-collapse>
                <el-collapse-item title="练习室">
                  <p style="color:#F93684;text-align: center;">
                    我的练习室
                  </p>
                </el-collapse-item>
              </el-collapse>
            </div>

            <div class="text item">
            </div>
          </el-card>
          <el-card class="left-bottom-card">
            <ul class="bootmul">
              <li>缓存</li>
              <li>音频库</li>
              <li>收藏</li>
              <li>历史</li>
            </ul>
          </el-card>
        </el-space>
      </div>
      <div class="right">
        <el-card>
          <div class="spans">

            <el-radio-group  style="margin-bottom: 30px" class="demo-tabs" type="border-card">
              <el-radio-button label="top" class="buttr" >全部</el-radio-button>
              <el-radio-button label="right" >我创建的</el-radio-button>
              <el-radio-button label="bottom" >我加入的</el-radio-button>
              <el-radio-button label="left" >我课程的</el-radio-button>
            </el-radio-group>
          </div>
        </el-card>


        <el-card class="imamg">
          <el-empty :image-size="200" />
        </el-card>

      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Training",
});

</script>

<script setup lang='ts'>

</script>

<style lang="scss" scoped>
.TrainingContainer {
  width: 100%;
  background-color: #f5f7f9;
}

.nav {
  width: 1200px;
  margin: auto;
  display: flex;
  font-size: 14px;
}

.box-card {
  width: 170px;
  background-color: #ffffff;

}

.left-bottom-card ul {
  margin: 0;
  padding: 0;
  float: left;
}

.left-bottom-card ul li {
  margin: 5px 0;
  height: 50px;
  list-style: none;
  padding-left: 15px;
}

.left-bottom-card ul li:nth-child(1) {
  border-left: 3px solid #F93684;
}

.left-bottom-card ul li:hover {
  border-left: 3px solid #F93684;
}

.left-bottom-card {
  width: 170px;
  background-color: #ffffff;
}

.right {
  width: 100%;
  height: 850px;
  margin-bottom: 70px;
}

.spans {
  float: left;
  height: 85.1px;
  line-height: 85.1px;
  padding-bottom: 10px;
  span {
    margin: 10px;
  }

  span:hover {
    padding-bottom: 40px;
    border-left: none;
    border-bottom: 3px solid #F93684;
  }
}

.uls {
  display: flex;
}

.imamg {
  width: 1020px;
  height: 700px;
  margin-top: 10px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.riahtab {
  width: 963px;
  height: 60px;
  border-bottom: 1px solid #ffffff;
}
</style>

<style>
.el-collapse-item__content {
  padding: 0px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.el-radio-button__inner{
  background-color: #f93684;
  color: aliceblue;
  height: 40px;
  width: 100px;
  line-height: 22px;
  border-radius: 3px;
  margin: 0 25px;

}
</style>
